import React, { useState } from 'react';
import { Ret, Title, useHigh, MainView, PanelTitle, BtGroup, BtToggle, loc } from 'sui';
import { StdView } from './std';
import { GtSumView } from '../gt/gtsum';

const CSview = ({ data, mod, title, hreturn, col, map_supply, map_stuff }) => {
    const [cens_type, tpCens] = useState("std");
    const [high] = useHigh(220, 100);

    const getView = () => {
        if (cens_type === "std") {
            return <StdView data={data} mod={mod} title={title} high={high} col={col} map_supply={map_supply} map_stuff={map_stuff}/>;
        } else if (cens_type === "sum") {
            return <GtSumView mod={mod} title={title} high={high}/>;
        }

        return null;
    };

    const Left = () => {
        return (
            <div className="inline-flex items-center">
                <Title mod={loc("l_793")} sub={title} className="mr-32"/>
                <BtGroup value={cens_type} exclusive onChange={(e, v) => tpCens(v)}>
                    <BtToggle value="std">{loc("l_160")}</BtToggle>
                    <BtToggle value="sum">{loc("l_836")}</BtToggle>
                </BtGroup>
            </div>
        );
    };

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Ret hcmd={hreturn}/>} cl="gray"/>
            {getView()}
        </MainView>
    );
};

export {CSview};
